<!--  -->
<template>
  <div class="save-folder">
    <el-dialog :title="title" :visible.sync="dialogVisible" width="490px" @closed="close" :close-on-click-modal="false">
      <el-form :model="folder" v-loading="loading" :rules="rules" ref="folderForm" label-width="100px">
        <el-form-item label="文件夹名称" prop="name">
          <el-input v-model="folder.name" autocomplete="off" style="width: 355px;" placeholder="输入小于100个字符的文件夹名称" size="medium">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close" size="small">取 消</el-button>
        <el-button type="primary" @click="save" size="small">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    resetPageData: {
      type: Function
    },
    maps: {
      type: Map
    },
    load: {
      type: Function
    }
  },
  data () {
    var checkName = (rule, value, callback) => {
      if (value.trim() === '') {
        callback(new Error('文件夹名称不能都为空格'))
      } else if (this.folders.indexOf(value.trim()) >= 0) {
        callback(new Error('文件夹名称已存在'))
      } else {
        callback()
      }
    }
    return {
      title: '',
      loading: false,
      dialogVisible: false,
      folder: {},
      path: null,
      rules: {
        name: [
          { required: true, message: '请输入文件夹名称', trigger: 'blur' },
          { min: 1, max: 100, message: '长度在1到100个字符', trigger: 'blur' },
          { validator: checkName, trigger: 'blur' }
        ]
      },
      folders: []
    }
  },
  methods: {
    create (title, path) {
      this.title = title
      if (path) {
        this.path = path
        this.$post('/virtual-folder/ls', {directory: this.path}).then(response => {
          if (response) {
            this.folders = initFolders(response)
          } else {
            this.folders = []
          }
        })
      } else {
        this.path = null
        this.$post('/virtual-folder/ls', null).then(response => {
          if (response) {
            this.folders = initFolders(response)
          } else {
            this.folders = []
          }
        })
      }
      this.dialogVisible = true
    },
    hidden () {
      this.dialogVisible = false
    },
    close () {
      if (this.$refs['folderForm']) {
        this.$refs['folderForm'].clearValidate()
      }
      this.folder = {}
      this.dialogVisible = false
    },
    save () {
      if (this.loading) {
        return
      }
      this.$refs['folderForm'].validate((valid) => {
        if (valid) {
          this.loading = true
          this.folder.name = this.folder.name.trim()
          let directory
          if (this.path) {
            directory = this.path + '/' + this.folder.name
          } else {
            directory = this.folder.name
          }
          this.$post('/virtual-folder/mkdir', {directory: directory}).then(response => {
            if (response) {
              this.loading = false
              this.close()
              if (this.path) {
                if (this.maps.get(this.path)) {
                  const {row, treeNode, resolve} = this.maps.get(this.path)
                  this.load(row, treeNode, resolve)
                }
              } else {
                this.resetPageData()
              }
            }
          })
        }
        return false
      })
    }
  }
}
function initFolders (res) {
  let folders = []
  res.forEach(item => {
    if (item.type.directory) {
      folders.push(item.name)
    }
  })
  return folders
}
</script>

<style scoped>
.save-folder /deep/ .el-dialog__body {
  padding-bottom: 10px;
}
.save-folder /deep/ .el-form-item {
  margin-bottom: 15px;
}
</style>
